<template>
  <el-checkbox-group
    v-model="configValue"
    @change="handleChange"
  >
    <el-button
      type="text"
      @click="handleSelectAll"
    >全选</el-button>
    <div
      v-for="colu in columns"
      :key="colu.prop"
    >
      <el-checkbox :label="colu.prop" :disabled="!!colu.alwaysShow">{{colu.label}}</el-checkbox>
    </div>
  </el-checkbox-group>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      cache: []
    }
  },
  computed: {
    configValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('update:value', val)
      }
    }
  },
  methods: {
    handleChange(value) {
      if (!value.length) {
        this.configValue = [...this.cache]
        this.$confirm('请保持至少显示一列', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {})
          .catch(() => {})
      } else {
        this.cache = [...value]
      }
    },
    handleSelectAll() {
      this.configValue = this.columns.map((ele) => ele.prop)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>